<template>
  <div>
    <!-- 加载中 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.7)"
      :style="loading ? 'height: 100%;' : ' height: 0'"
      class="loading"
    />
    <!-- 主体卡片区域 -->
    <div class="content">
      <el-row>
        <el-col :span="17">
          <!-- 订单概括 -->
          <el-row style="margin-bottom: 40px">
            <el-col :span="24">
              <el-card
                ref="card"
                shadow="hover"
                style="height: 200px"
                class="top top-left"
              >
                <h3>订单概括</h3>
                <div>
                  <p>订单编号</p>
                  <el-tag effect="plain">{{ order_uid }}</el-tag>
                </div>
                <div>
                  <p>订单金额</p>
                  <el-tag effect="plain">￥{{ merchant_price }}</el-tag>
                </div>
                <div>
                  <p>创建日期</p>
                  <el-tag effect="plain">{{ created_at }}</el-tag>
                </div>
                <div>
                  <p>订单状态</p>
                  <el-tag effect="plain">{{
                    $map.commentMap[status_display]
                  }}</el-tag>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- 交易概括 -->
          <el-row style="margin-bottom: 40px">
            <el-col :span="24">
              <el-card shadow="hover" class="top top-right">
                <h3>交易概括</h3>
                <el-table
                  id="table"
                  :data="get_funds_log"
                  style="width: 100%"
                  show-summary
                  sum-text="合计"
                  :summary-method="getFundsSummaries"
                >
                  <el-table-column
                    label="交易流水号"
                    prop="funds_uid"
                    min-width="120px"
                  />
                  <el-table-column
                    label="交易类型"
                    prop="payment_type"
                    min-width="70px"
                  >
                    <template v-slot="scope">{{
                      $map.commentMap[scope.row.payment_type]
                    }}</template>
                  </el-table-column>
                  <el-table-column label="资金类型" min-width="70px">
                    <template v-slot="scope">{{
                      $map.commentMap[scope.row.payment_channel]
                    }}</template>
                  </el-table-column>

                  <el-table-column label="交易金额" min-width="70px">
                    <template v-slot="scope">
                      <span
                        v-if="
                          $map.commentMap[scope.row.payment_type] === '消费'
                        "
                        style="color: red"
                      >
                        <el-tooltip id="tooltip" class="item" effect="dark" :content="$capitalizationAmount(scope.row.payment_price)" placement="top-start">
                          <span> -￥{{ scope.row.payment_price }}</span>
                        </el-tooltip>
                      </span>
                      <span
                        v-else
                        style="color: green"
                      >
                        <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(scope.row.payment_price)" placement="top-start">
                          <span> +￥{{ scope.row.payment_price }}</span>
                        </el-tooltip>
                      </span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="交易后余额"
                    prop="after_funds"
                    min-width="80px"
                  >
                    <template
                      v-slot="scope"
                    >

                      <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(scope.row.after_funds)" placement="top-start">
                        <span> ￥{{ scope.row.after_funds }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>

                  <el-table-column label="状态" prop="status" min-width="40px">
                    <template v-slot="scope">{{
                      $map.commentMap[scope.row.status]
                    }}</template>
                  </el-table-column>
                  <el-table-column label="说明" prop="comment" width="140px">
                    <template v-slot="scope">
                      <tool :content="scope.row.comment">
                        {{ scope.row.comment }}
                      </tool>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="时间"
                    prop="created_at"
                    min-width="140px"
                  />
                </el-table>
              </el-card>
            </el-col>
          </el-row>
          <!-- 订单商品 -->
          <el-row style="margin-bottom: 40px">
            <el-col :span="24">
              <el-card shadow="hover" class="left-middle">
                <h3>订单商品</h3>
                <el-table
                  :data="get_products"
                  style="width: 100%"
                  sum-text="合计"
                  show-summary
                  :summary-method="getSummaries"
                >
                  <el-table-column
                    label="编号"
                    prop="that_id"
                    min-width="50px"
                  />
                  <el-table-column
                    label="商品"
                    prop="description"
                    width="168px"
                  >
                    <template v-slot="scope">
                      <tool :content="scope.row.description">
                        {{ scope.row.description }}
                      </tool>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用时间" min-width="130px">
                    <template v-slot="scope">
                      <span v-if="scope.row.target_at === null">处理中</span>
                      <span v-else>{{
                        scope.row.target_end === null
                          ? `${scope.row.target_at}`
                          : `${scope.row.target_at}+' '+${scope.row.target_end}`
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="关联旅客" width="140px">
                    <template v-slot="scope">
                      <el-tag
                        v-if="scope.row.guest === null"
                        type="warning"
                        effect="dark"
                      >处理中</el-tag>
                      <el-tag
                        v-else-if="scope.row.guest.length === 0"
                        type="warning"
                        effect="dark"
                      >处理中</el-tag>
                      <tool
                        v-else
                        :content="scope.row.guest.subEntries | passengers(140)"
                      >
                        {{ scope.row.guest.subEntries | passengers(140) }}
                      </tool>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="数量"
                    prop="product_number"
                    min-width="60px"
                  />
                  <el-table-column label="单价" min-width="100px">
                    <template
                      v-slot="scope"
                    >
                      <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(scope.row.merchant_product_price)" placement="top-start">
                        <span> ￥{{ scope.row.merchant_product_price }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column label="小计" min-width="100px">
                    <template
                      v-slot="scope"
                    >
                      <el-tooltip class="item" effect="dark" :content="$capitalizationAmount(subtotal(scope.row.product_number,scope.row.merchant_product_price))" placement="top-start">
                        <span> ￥{{
                          subtotal(scope.row.product_number,scope.row.merchant_product_price)
                        }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="商品状态"
                    prop="product_status"
                    min-width="70px"
                  >
                    <template v-slot="scope">
                      <span>{{
                        $map.commentMap[scope.row.product_status]
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="100px">
                    <template v-slot="scope">
                      <div v-if="scope.row.product_status==='NORMAL'">
                        <el-button
                          type="text"
                          style="margin-right: 20px"
                          @click="reissue(scope.row)"
                        >改签</el-button>
                      </div>
                      <div v-else>---</div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
          <!-- 票务信息 -->
          <el-row style="margin-bottom: 40px">
            <el-col :span="24">
              <el-card shadow="hover" class="left-middle">
                <h3>票务信息</h3>
                <el-table
                  :data="ticketingInfoList"
                  style="width: 100%"
                >
                  <el-table-column
                    label="旅客姓名"
                    prop="name"
                    min-width="50px"
                  />
                  <el-table-column
                    label="门票编号"
                    prop="ubr_product_code"
                    width="168px"
                  />
                </el-table>
              </el-card>
            </el-col>
          </el-row>
          <!-- 旅客类型 -->
          <el-row>
            <el-col :span="24">
              <el-card shadow="hover" class="left-bottom">
                <h3>订单旅客</h3>
                <el-table :data="get_guests" style="width: 100%">
                  <el-table-column label="旅客类型" min-width="160px">
                    <template v-slot="scope">{{
                      scope.$index === 0 ? "主要旅客" : "旅客"
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    label="旅客姓名"
                    prop="funds_uid"
                    min-width="160px"
                  >
                    <template v-slot="scope">{{
                      scope.row.last_name + scope.row.first_name
                    }}</template>
                  </el-table-column>
                  <el-table-column label="证件类型" min-width="160px">
                    <template v-slot="scope">{{
                      $map.commentMap[scope.row.id_type]
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    label="证件号"
                    prop="id_no"
                    min-width="160px"
                  />
                  <el-table-column
                    label="手机号"
                    prop="telephone"
                    min-width="160px"
                  />
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <!-- 订单操作 -->
        <el-col :span="7">
          <el-card shadow="hover" class="right">
            <h3>订单操作</h3>
            <el-button
              style="margin-top: 24px"
              type="primary"
              plain
              @click="getRefund"
            >取消订单(退款)</el-button>
            <h3 style="margin-top: 24px">订单记录</h3>
            <span
              v-if="get_order_log.length === 0"
              style="margin-top: 24px"
            >暂无订单变更记录</span>
            <el-card
              v-for="(item, index) in get_order_log"
              v-else
              :key="index"
              style="margin-top: 24px"
              shadow="hover"
            >
              <p>{{ item.created_at }}</p>
              <p class="p_bottom">{{ item.comment }}</p>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
      <!-- 退款弹出框 -->
      <el-dialog title="订单退款" :visible.sync="refundSuccess" width="30%">
        <p>
          当前订单系统
          <span>允许</span>退款，预计退票服务费 <span>￥{{ serviceFee }}</span>。实际服务费以支付流水为准。
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="refundSuccess = false">取 消</el-button>
          <el-button
            class="el-button-right"
            type="primary"
            @click="getOrderRefund"
          >确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="订单退款" :visible.sync="refundFail" width="30%">
        <p>
          当前订单系统
          <span>拒绝</span>退款，如有疑问请咨询平台客服人员。
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="refundFail = false"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 改签弹出对话框 -->
      <el-dialog
        class="calendarShow"
        title="请选择改签日期"
        :visible.sync="calendarShow"
      >
        <div class="calendar-wrapper">
          <btg-calendar
            ref="calendar"
            :options="calendarOptions"
            :refresh-func="fetchTickets"
            @clickDate="clickDate"
          />
        </div>
      </el-dialog>
      <!-- 确认改签 -->
      <el-dialog title="改签确认" :visible.sync="ticketChangesShow" width="30%">
        <p>
          您确认此门票改签至<span> {{ rescheduleData.targetDate }} </span>？
        </p>
        <p>
          改签后会产生相关费用，<span>最终费用以调度成功后的资金流水为准。</span>
        </p>
        <p>
          -<span> {{ rescheduleData.reschedule_fee }} </span>元，服务费。
        </p>
        <p>
          -<span> {{ rescheduleData.ticketPriceDiff }} </span>元，门票差价。
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button
            style="margin-right: 20px"
            @click="ticketChangesShow = false"
          >取消</el-button>
          <el-button type="primary" @click="updataTicketDate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getOrderDetails,
  getRefund,
  getOrderRefund,
  getReschedule,
  updataTicketDate
} from '@/api/order'
import { getTicketList } from '@/api/profit'
import BtgCalendar from 'btgcalendar'
import { getTicket } from '@/api/travel'
import tool from '@/components/tool'
export default {
  name: 'OrderDetails',
  components: { BtgCalendar, tool },
  filters: {
    passengers(data, number) {
      if (data === null) {
        return '---'
      } else if (data.length === 0) {
        return '---'
      } else {
        var names = ''
        data.forEach((item) => {
          const name = item.lastname + item.firstname
          names = names + ',' + name
        })
        names = names.substr(1)
        number = number - 2 * 14
        number = number / 14

        if (parseInt(names.length) > parseInt(number)) {
          names = names.substr(0, number - 1) + '...'
        }
        // this.nameLenght = names.length
        return names
      }
    }
  },
  data() {
    return {
      created_at: '',
      status_display: '',
      merchant_price: '',
      order_uid: '',
      get_funds_log: [],
      get_products: [],
      get_guests: [],
      get_order_log: [],
      total_price: null,
      order_price: null,
      order_number: null,
      serviceFee: null,
      ticketingInfoList: [],
      refundSuccess: false,
      refundFail: false,
      loading: false,
      calendarShow: false,
      ticketChangesShow: false,
      // 判断浏览器哦
      userAgent: 'Firefox',
      // 判断分辨率
      screen_width: '1920',
      nameLenght: 0,
      name: '',
      calendarOptions: {
        type: 'mini', // [large, small]
        ticketsData: {},
        ticketCode: '',
        updateTitle: '最近一次UBR数据同步时间：',
        priceColor: [
          {
            value: 99999999, // 实际数量小于value就显示value的color
            type: 'price' // 可以设置type
          }
        ],
        availableColor: [
          {
            value: 2000,
            type: 'low'
            // backgroundColor: '#FEF0F0', // 或者自定义颜色
            // borderColor: '#FBC4C4',
            // textColor: '#FF6F5B'
          },
          {
            value: 10000,
            type: 'mid'
            // backgroundColor: '#FEF0F0', // 或者自定义颜色
            // borderColor: '#FBC4C4',
            // textColor: '#FF6F5B'
          },
          {
            value: 10000,
            type: 'high'
            // backgroundColor: '#ECF8F2',
            // borderColor: '#97D2B4',
            // textColor: '#42B983'
          }
        ],
        enableRefresh: false, // 是否需要刷新按钮， default true
        enableSelect: false, // 是否需要条件选择器， default true
        isHoverEvent: true, // 鼠标移动到日期上，如果有事件，是否需要显示，default true
        typeMap: {} // 类型map，可不传
      },
      query: {
        order_uid: '',
        that_id: '',
        target_date: ''
      },
      rescheduleData: ''
    }
  },
  watch: {
    get_funds_log: function() {
      // 修改合计行颜色
      const s_table = document.getElementsByClassName(
        'el-table__footer-wrapper'
      )[0]
      const child_tr = s_table.getElementsByTagName('tr')[0]
      const child_td = child_tr.getElementsByTagName('td')[3]
      if (parseInt(this.total_price) < 0) {
        child_td.style = 'color:green'
      } else if (parseInt(this.total_price) === 0) {
        child_td.style = 'color:black'
      } else {
        child_td.style = 'color:red'
      }
    },
    status_display: function() {
      this.loading = false
    }
  },
  created() {
    this.getOrderDetails()
    // 判断是否是谷歌浏览器
    var userAgent = navigator.userAgent
    if (userAgent.indexOf('Chrome') > -1) {
      this.userAgent = 'Chrome'
    }
    //
    // 判断分辨率是否小于1920
    if (parseInt(window.screen.width) < 1920) {
      this.screen_width = 1366
    }
  },
  methods: {
    getOrderDetails() {
      const uid = this.$route.query.id
      getOrderDetails(uid).then((res) => {
        const data = res.data.data

        this.created_at = data.created_at
        this.status_display = data.status_display
        this.merchant_price = data.merchant_price
        this.order_uid = data.order_uid
        this.get_funds_log = data.get_funds_log

        this.get_products = data.get_products

        this.get_guests = data.get_guests
        this.get_order_log = data.get_order_log

        // 获得合计交易金额
        this.total_price = 0
        this.order_price = 0
        this.get_funds_log.forEach((item) => {
          if (item.payment_type === 'CONSUME') {
            this.total_price =
              this.total_price + parseFloat(item.payment_price)
          } else {
            this.total_price =
              this.total_price - parseFloat(item.payment_price)
          }
        })
        this.total_price = this.total_price.toFixed(2)
        // 获得商品合计
        this.get_products.forEach((item) => {
          this.order_price =
            item.product_number * item.merchant_product_price +
            this.order_price
        })
        this.order_price = this.order_price.toFixed(2)
        // 获得商品数量
        this.get_products.forEach((item) => {
          this.order_number = item.product_number + this.order_number
        })
        // 计算退票服务费
        getTicketList().then((res) => {
          const serverMap = {}
          this.serviceFee = 0
          res.data.data.products.forEach((item) => {
            serverMap[item.baseProduct.code] = item.serviceFee
          })
          this.get_products.forEach((item) => {
            if (serverMap[item.product_code]) {
              this.serviceFee =
                this.serviceFee +
                ((serverMap[item.product_code] * 100) / 100) *
                  item.product_number
            }
          })
          this.serviceFee = this.serviceFee.toFixed(2)
        })
        // 计算票务信息
        const get_product_details = data.get_product_details
        get_product_details.forEach(item => {
          this.get_guests.forEach(value => {
            if (value.current_sort === item.order_guest_id) {
              console.log(item, value)
              const ticketingInfoListItem = {
                name: value.last_name + value.first_name,
                ubr_product_code: item.ubr_product_code
              }
              this.ticketingInfoList.push(ticketingInfoListItem)
            }
          })
        })
        console.log('this.ticketingInfoList', this.ticketingInfoList)
      })
    },
    getSummaries(param) {
      const sums = []
      const { columns } = param
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 4) {
          sums[index] = this.order_number
          return
        } else if (index === 6) {
          // sums[index] = '￥' + this.order_price
          sums[index] = (() => {
            const content = this.$capitalizationAmount(this.order_price)
            const data = this.order_price
            const el = <el-tooltip id='total-dark' class='item' effect='dark' placement='top-start'>
              <span id='total-Summaries'>￥{data}</span>
              <div slot='content' id='total-slot'>
                {content}
              </div>
            </el-tooltip>
            return el
          })()
          return
        } else {
          sums[index] = ''
          return
        }
      })
      return sums
    },
    getFundsSummaries(param) {
      const sums = []
      const { columns } = param
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 3) {
          const content = this.$capitalizationAmount(this.total_price)
          var data = this.total_price
          if (parseInt(this.total_price) === 0) {
            data = '￥' + data
          } else if (parseInt(this.total_price) > 0) {
            data = '-￥' + data
          } else {
            data = '+￥' + data
          }
          sums[index] = (() => {
            const el = <el-tooltip id='total-dark' class='item' effect='dark' placement='top-start'>
              <span id='total-Summaries'>{data}</span>
              <div slot='content' id='total-slot'>
                {content}
              </div>
            </el-tooltip>
            return el
          })()
          return
        } else {
          sums[index] = ''
          return
        }
      })
      return sums
    },
    // 取消订单，退款预效验
    getRefund() {
      const uid = this.$route.query.id
      if (this.status_display === 'NORMAL') {
        getRefund(uid).then((res) => {
          if (res.data.data.refund_allow === true) {
            this.refundSuccess = true
          } else if (res.data.data.refund_allow === false) {
            this.refundFail = true
          }
        })
      } else {
        this.$message({
          showClose: true,
          message: '当前订单状态不允许执行取消操作。',
          duration: 3000,
          type: 'warning'
        })
      }
    },
    // 退款
    getOrderRefund() {
      const uid = this.$route.query.id
      getOrderRefund(uid).then((res) => {
        this.refundSuccess = false
        this.$message({
          showClose: true,
          message: '申请退款成功',
          duration: 3000,
          type: 'success'
        })
        this.loading = true
        this.getOrderDetails()
      })
    },
    // 鼠标经过
    changeMask(data, number) {
      var names = ''
      data.forEach((item) => {
        const name = item.lastname + item.firstname
        names = names + ',' + name
      })
      names = names.substr(1)
      this.name = names
      // number = number - 2 * 14
      number = number / 14

      if (parseInt(names.length) > parseInt(number)) {
        names = names.substr(0, number - 1) + '...'
      }
      this.nameLenght = names.length
      return
    },
    getTicket() {
      getTicket().then((res) => {
        this.calendarOptions.ticketsData = res.data.data
      })
    },
    fetchTickets() {
      this.getTicket()
    },
    clickDate(event) {
      this.query.target_date = event.event.datetime
      // this.query.target_date = '2020-12-10 00:00:00'
      this.loading = true
      this.getReschedule()
    },
    changeTicketCode(value) {},
    // 改签判断是否是年票季票
    reissue(row) {
      if (row.category === 'AnnualPass' || row.category === 'SeasonalPass') {
        this.$message({
          showClose: true,
          message: '年/季卡不允许改签。',
          duration: 3000,
          type: 'warning'
        })
      } else {
        this.calendarShow = true
        this.calendarOptions.ticketCode = row.product_code

        this.query.order_uid = row.order_uid
        this.query.that_id = row.that_id
        this.fetchTickets()
      }
    },
    getReschedule() {
      getReschedule(this.query).then((res) => {
        if (res.data.code === 200) {
          this.loading = false
          this.ticketChangesShow = true
          this.rescheduleData = res.data.data
          console.log(res.data.data)
        }
      })
    },
    // 确认改签
    updataTicketDate() {
      const query = {
        order_uid: this.query.order_uid,
        that_id: this.query.that_id
      }
      this.loading = true
      this.ticketChangesShow = false
      updataTicketDate(query)
        .then((res) => {
          this.loading = false
          if (res.data.code === 200) {
            this.calendarShow = false
            this.$message({
              showClose: true,
              message: '改签成功。',
              duration: 3000,
              type: 'success'
            })
            this.getOrderDetails()
          }
          console.log(123)
          console.log(res)
        })
        .catch((error) => {
          console.log(error)
          this.loading = false
          if (error.code !== 400) {
            this.calendarShow = false
          }
        })
    },
    subtotal(data, price) {
      const number = (data * parseInt(price * 100)) / 100
      return number.toFixed(2)
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  min-width: 1366px;
  padding: 24px;
  .top-left {
    .el-tag {
      width: 95%;
      font-size: 14px;
    }
  }
  .top {
    h3 {
      margin-top: 0;
    }
    p {
      font-size: 14px;
    }
    div {
      float: left;
      width: 25%;
      text-align: center;
      margin-bottom: 20px;
    }
    .el-table {
      margin-top: 0px;
      margin-bottom: 24px;
      .el-table__footer-wrapper {
        color: blue;
      }
    }
  }
  .top-right {
    span {
      display: inline-block;
      font-size: 12px;
    }
    .top-right-span {
      margin-left: 38%;
    }
    .el-table::before {
      //去掉最下面的那一条线
      height: 0px;
    }
  }
  .left-middle {
    h3 {
      margin-top: 0;
    }
    .el-table {
      margin-bottom: 40px;
    }
    span {
      font-size: 12px;
    }
    .middle-price-span {
      margin-left: 15%;
    }
    .middle-number-span {
      margin-left: 53%;
    }
  }
  .left-bottom {
    h3 {
      margin-top: 0;
    }
  }
  .right {
    width: calc(100% - 40px);
    margin-left: 40px;
    text-align: center;
    min-height: 840px;
    h3 {
      text-align: left;
      margin: 0;
    }
    .el-button {
      display: block;
      width: 100%;
      margin-top: 16px;
    }
    .el-card {
      width: 100%;
      p {
        margin-top: 0;
        text-align: left;
        font-size: 14px;
      }
      .p_bottom {
        margin-bottom: 0;
      }
      margin-bottom: 16px;
    }
    span {
      font-size: 18px;
      font-weight: 500;
      color: grey;
    }
  }
}
.el-button + .el-button {
  margin-left: 0px;
}
.el-dialog {
  p {
    span {
      font-weight: bold;
    }
  }
}
// 加载中
.loading {
  position: absolute;
  width: 100%;
  // left: -24px;
  // top:-24px;
  z-index: 9000;
}
// 适配火狐
.Firefox {
  .el-tag {
    width: 95%;
    font-size: 14px;
    @media screen and(max-width: 1919px) {
      width: 95%;
      font-size: 10px;
      overflow: hidden;
    }
  }
}
// 适配谷歌
.Chrome {
  .el-tag {
    width: 95%;
    font-size: 14px;
    // transform: scale(1);
    // -webkit-transform: scale(0.8);
  }
  @media screen and(max-width: 1919px) {
    .el-tag {
      width: 95%;
      font-size: 14px;
      transform: scale(1);
      // -webkit-transform: scale(0.8);
      overflow: hidden;
    }
  }
}
.calendar-wrapper {
  margin: 0 auto;
  width: 490px;
  height: 370px;
  margin-bottom: 24px;
}
</style>
<style lang="css" scoped>
#table
  /deep/
  .el-table__footer-wrapper
  > .el-table__footer
  > .has-gutter
  > .el-table_1_column_3
  > .cell {
  color: red !important;
}
.el-card /deep/ .el-card__body {
  padding: 24px !important;
}
.calendarShow /deep/ .el-dialog {
  width: 530px;
}
</style>
